<template>
	<view>
		<button class="cancel" @click="cancel">取消</button>
		<view class="payDetail">
			<h4>付款详情</h4>
			<h5>{{(allMoney/100).toFixed(2)}}元</h5>
			<h5>需要支付的金额</h5>
		</view>
		<view class="botton">
			<label class="radio">微信支付
				<radio value="r2" checked />
			</label>
			<button v-if="payButton" type="default" plain="true" @click="pay">确认支付</button>
			<button v-else type="default" plain="true" :disabled="true">确认支付</button>
		</view>
    
    
<!-- 弹层 -->
      <view class="mask" v-if="showModal" ></view>
      <view class="modalDlg" v-if="showModal">
          <text>请确认微信支付是否已完成</text>
          <text class="pays">已完成支付</text>
          <text class="paysTrouble">支付遇到问题，重新支付</text>
      </view>
    


	</view>
</template>

<script>
	export default {
		data() {
			return {
        showModal:false,
				payToken: '',
				orderId: '',
				openId: '',
				allMoney: '',
				isPayIng: false,
				payButton: true
			}
		},
		methods: {
			pay() { //  确认支付
				if (this.isPayIng == true) {
					return
				}
				let _that = this
				this.isPayIng = true
				console.log("调用微信登陆")

				wx.login({
					success: res => {
						console.log("微信登陆结果是", res)
						console.log("获取openid");
						_that.$request.get('user/openId', {
							code: res.code
						}).then((data) => {
							console.log("获取openid的结果是", data);
							return _that.$request.post('order/weChatPayOrder', {
								id: _that.orderId,
								openId: data.data
							})
						}).then((data) => {
							console.log("获取支付的参数是", data, {
								timeStamp: data.data.timeStamp,
								nonceStr: data.data.nonceStr,
								package: data.data.package,
								signType: data.data.signType,
								paySign: data.data.paySign
							})

							wx.requestPayment({
								timeStamp: data.data.timeStamp + "",
								nonceStr: data.data.nonceStr,
								package: data.data.package,
								signType: data.data.signType,
								paySign: data.data.paySign,
								success(res) {
									//支付成功
									_that.payButton = false
									
									//  购物车里面的数据需要清除
									_that.isPayIng = false

									uni.removeStorageSync('cart');
									console.log("是否支付成功", res);

									console.log("设置支付成功缓存");
									uni.setStorageSync('isPaySuccess', true);
									console.log("获取支付成功缓存的值是");
									console.log(uni.getStorageSync('isPaySuccess'));
									// console.log("")

									setTimeout(() => {
										console.log("@@@@@@@@支付成功开始跳转页面");
										uni.reLaunch({
											url: "/pages/order/order/order?isorder=1"
										})
									}, 0)
                   setTimeout(()=>{
                     // 如果现在是支付页面  就显示弹层   if 
                   },0.1)
								},
								fail(res) {
									_that.isPayIng = false
									uni.showToast({
										title: '支付失败',
										duration: 2000,
										icon: 'error'
									});

								},
								complete(res) {
									_that.isPayIng = false
									console.log("支付完成的结果是", res)
								}
							})
						}).catch(() => {
							_that.isPayIng = false
						})
						// 发送 res.code 到后台换取 openId, sessionKey, unionId
					}
				})
			},
			cancel() {
				uni.reLaunch({
					url: "/pages/order/order/order?isorder=1"
				})
			}
		},
		onLoad(option) {
			console.log(3425364745)
			this.allMoney = option.money
			console.log(option)
			this.orderId = option.orderId
			// this.$request.get('user/accessToken').then(res=>{
			//   this.payToken = res.data
			//   console.log( this.payToken)
			// })


			// uni.request({
			//   url:'https://api.weixin.qq.com/sns/jscode2session ' ,
			//   method:'GET',
			//   data:{
			//     'appid': 'wx9daae765f132132e',
			//     'secret': '2a0b2cbf6787ad53b679a5186300144f',
			//     "js_code": js_code,
			//     "grant_type": authorization_code,
			//   },
			//   success(res=>{
			//      console.log( res )
			//   })
			//   })
			// this.$request.get('https://api.weixin.qq.com/sns/jscode2session ').then(res=>{
			// 				  this.payToken = res.data
			// 				  console.log( this.payToken)
			// }) 
			// uni.request({
			//   url:'https://api.weixin.qq.com/sns/jscode2session' ,
			//   method:'GET',
			//   success(res=>{
			// 				     console.log( res )
			//   })
			//   })




		},
		onShow() {
			this.isPayIng = false
			this.payButton = true
		}
	}
</script>

<style lang="scss" scoped>
	.cancel {
		width: 200rpx;
		margin-top: 30rpx;
		margin-left: 20rpx;
		background-color: #fff;

	}

	.payDetail {
		text-align: center;
		margin-top: 80rpx;

		h4 {
			margin-bottom: 40rpx;
		}
	}

	.botton {
		position: fixed;
		bottom: 20%;
		width: 100%;

		label {
			margin-left: 500rpx;
		}

		button {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			margin-top: 40rpx;
			background-color: rgb(10, 185, 6);
			height: 80rpx;

			border: 0;
			color: #fff;
			line-height: 80rpx;
			border-radius: 4rpx;
		}
	}
  .mask{
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      background: #000;
      z-index: 9000;
      opacity: 0.7;
  }
   
  .modalDlg{
      width: 580rpx;
      height: 270rpx;
      position: fixed;
      top: 50%;
      left: 0;
      z-index: 9999;
      margin: -370rpx 85rpx;
      background-color: #fff;
      border-radius: 36rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      text {
         margin-top: 30rpx;
      }
      
     .pays {
       width:100%;
       // display: inline-block ;
       text-align: center;
       height: 80rpx;
       line-height: 80rpx;
       font-weight: 500;
        color:red !important;
        border-top: 1px solid gray;
        border-bottom: 1px solid gray;
     }
}
</style>